<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>bbs后台管理系统</title>
    <link rel="stylesheet" href="../css/elementUI.css" />
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        html,body,#app{
            width: 100%;
            height: 100%;
            font-size: 14px;
        }
        .el-container{
            width: 100%;
            height: 100%;
        }
        .el-header{
            width: 100%;
            padding: 0;
            font-size:18px;
            line-height:60px;
            background-color:#000;
            color:#fff;

        }
        .log{
            position: relative;
            width: 100%;
            height: 64px;
            background-color:  #fff;

        }

        .log img{
            position: absolute;
            top: 0;
            left: 0;
            height: 60px;

        }
        .el-main{
            padding: 0;
        }
        .el-menu{
            height: 100%;
        }
        iframe{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header><div class="log"><img src="../image/logo.gif" alt=""></div></el-header>

        <el-container>
            <el-aside width="200px">
                <el-menu
                        class="el-menu-vertical-demo"
                        :unique-opened="false"
                        @select="toPage">
                    <el-submenu index="user">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>用户</span>
                        </template>
                        <el-menu-item index="user/show">用户管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="board">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span slot="title">论坛</span>
                        </template>
                        <el-menu-item index="board/show">论坛管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="link">
                        <template slot="title">
                            <i class="el-icon-share"></i>
                            <span>友情链接</span>
                        </template>
                        <el-menu-item index="link/show">友情链接管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="advertise">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>广告</span>
                        </template>
                        <el-menu-item index="advertise/show">广告管理</el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-main>
                <iframe :src="url"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="../js/vue.js"></script>
<script src="../js/elementUI.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            url:'welcome.html',
            id:''
        },
        methods: {
            toPage(page){
                this.url = page + '.html?'+this.id;
            }
        },
        mounted(){
            this.id = location.search.replace("?","");
        }
    });
</script>
</body>
</html>